@import '../colors'

picture-width = 200px
picture-height = 300px

.profile-picture-card
    .card-header
        > :first-child
          display flex
          justify-content space-between
        position relative
        padding 15px
        background-color #f7f7f7
        height 95px
        .subtitle
            font-size 12px
            color secondary-text
        .floating-action-btn
            position absolute
            right 20px
            bottom -28px
            .file-input
                position absolute
                top 0
                right 0
                min-width 100%
                min-height 100%
                font-size 100px
                text-align right
                opacity 0
                outline none
                background white
                cursor inherit
                display block
        .progress-wrapper
            position absolute
            left 0
            bottom 0
            right 0
            > .progress
                margin 0
                border-radius 0
        .btn-icon > i
            color primary-text

    .card-content
        display flex
        flex-wrap wrap
        height 340px
        padding 20px


    .bottom-bar
        display flex
        align-items center
        justify-content space-between
        padding 15px
        .btn-icon > i
            color primary-text
    .upload-area-wrapper
        padding 5px
        display flex
        justify-content center
        align-items center
        overflow hidden
    .profile-picture-tile > .upload-area-wrapper
        height 100%
    #carousel
        height picture-height
        // min-width picture-width
        width 100%
        margin-bottom 0
        .profile-picture-container
            height picture-height
            min-width picture-width
            display flex
            align-items center
            justify-content center
            position relative
            > .upload-area-wrapper
                min-height picture-height
                min-width picture-width
                > i
                    color secondary-text
            > img
                max-width 100%
                max-height 100%


.profile-dashboard .card .card-content

    .profile-picture-tile
      height 100px
      width 100px
      display inline-block
      position relative
      border 1px solid divider
      margin 5px
      .cover-image
        width 100%
        height 100%
      .tile-bottom-bar
        padding 2px
        background-color rgba(0,0,0,0.35)
        position absolute
        bottom 0
        right 0
        left 0
        display flex
        justify-content flex-end
        .btn-icon > i
          color rgba(255,255,255,0.65)
